<template>
  <section class="ta-list">
    <a-button id="fetch-button" @click="allHandle"> 获取5条 </a-button>
    <a-button id="add-button" @click="addHandle">添加一条</a-button>
    <a-list
      :grid="{ gutter: 16, column: 4 }"
      item-layout="vertical"
      :data-source="list.data"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <ArticleCard :item="item" />
        </a-list-item>
      </template>
    </a-list>
  </section>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from "vue";
import { Button } from "ant-design-vue";
import ArticleCard from "./ArticleCard.vue";
import * as axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();
let page = ref(1);
const list = reactive({
  data: [],
});

onBeforeMount(() => {
  let condition = {
    limit: 5,
    page: page.value,
  };
  fetchList(condition);
});
const allHandle = () => {
  let condition = {
    limit: 5,
    page: page.value,
  };
  fetchList(condition);
};
const addHandle = () => {
  router.push("/add");
};

async function fetchList(params?) {
  const token = await localStorage.getItem("token");
  const res = await axios.get("http://localhost:8090/blog/list", {
    headers: { token: token },
    params: params,
  });
  if (res.data.code == 0) {
    list.data = list.data.concat(res.data.data.records);
    page.value = page.value + 1;
  }
}
</script>

<style scoped>
.ta-list {
  padding: 15px;
}
#fetch-button {
  position: absolute;
  left: 15px;
  top: 15px;
}
#add-button {
  position: absolute;
  left: 105px;
  top: 15px;
}
</style>
